<template>
  <div class="app-container">
    <el-row :gutter="10" :class="{'mobile-layout': isMobile}">
      <el-col :span="showTree ? 6 : 0" :xs="showTree ? 24 : 0" :sm="showTree ? 8 : 0" v-if="!isMobile">
        <div style="display: block; margin-bottom: 15px;">
          <CourseTree :title="title" @search="getList1" />
        </div>
      </el-col>
      
      <!-- 移动端头部 -->
      <div class="mobile-header" v-if="isMobile">
        <div class="page-title">知识点管理</div>
        <div class="mobile-category" @click="showCategorySelector = true">
          <span>课程分类</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      
      <el-col :span="showTree ? 18 : 24" :xs="24" :sm="showTree ? 16 : 24">
        <div class="course_content">
          <el-row type="flex" justify="around" style="width: 100%" :class="{'mobile-search': isMobile}">
            <el-col :span="20" :xs="24">
              <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" :class="{'mobile-form': isMobile}">

                <el-form-item label="知识点名称" prop="knowledge">
                  <el-select v-model="queryParams.name_wd" placeholder="请选择.." clearable filterable size="small"
                    @change="handleQuery">
                    <el-option v-for="dict in knowledgeOptions" :key="dict.id" :label="dict.name" :value="dict.name" />
                  </el-select>
                </el-form-item>
                <el-form-item label="知识点内容" prop="key">
                  <el-input v-model="queryParams.content_wd" placeholder="请输入关键字" clearable size="small"
                    @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="handleQuery" :style="{
                    backgroundColor: theme,
                    borderColor: theme,
                    width: isMobile ? '100%' : 'auto'
                  }">搜索</el-button>
                  <el-button size="mini" @click="resetQuery" :style="{
                    width: isMobile ? '100%' : 'auto',
                    marginTop: isMobile ? '10px' : '0'
                  }">清空</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8" :class="{'mobile-toolbar': isMobile}">
            <el-col :span="1.5" :xs="24">
              <el-button type="primary" icon="el-icon-plus" :style="{
                backgroundColor: theme,
                borderColor: theme,
                fontWeight: 'bold',
                width: isMobile ? '100%' : 'auto',
                marginBottom: isMobile ? '10px' : '0'
              }" @click="handleAdd()" v-hasPermi="['course:knowledge:add']">新建知识点</el-button></el-col>
            <right-toolbar :showSearch.sync="showSearch" :showTree.sync="showTree" @queryTable="getList" v-if="!isMobile"></right-toolbar>
          </el-row>

          <el-table 
            :data="List" 
            style="width: 100%; margin-top: 20px" 
            v-loading="loading" 
            @row-dblclick="handleUpdate"
            :default-sort="{ prop: 'sort', order: 'ascending' }" 
            element-loading-text="数据加载中"
            :class="{'mobile-table': isMobile}"
            v-if="!isMobile"
            size="mini">
            <el-table-column label="序号" min-width="40">
              <template slot-scope="scope">
                {{ (queryParams.page - 1) * queryParams.page_size + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="知识点名称"> </el-table-column>
            <el-table-column label="知识点分类">
              <template slot-scope="scope">
                {{ scope.row.category.name }}
              </template>
            </el-table-column>
            <el-table-column label="知识点内容" min-width="300" max-height="200" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-html="scope.row.content" :style="{
                  maxHeight: '100px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }" />
              </template>
            </el-table-column>

            <el-table-column prop="create_time" label="创建时间">
             </el-table-column>
            <el-table-column label="试题" :show-overflow-tooltip="false" v-if="admin">
              <template slot-scope="scope">
                <el-button type="text" @click="handleQuestion(scope.row.id)" :style="{ color: theme }">
                  查看（{{ scope.row.question }}）</el-button>
              </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" v-if="!showTree">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-row :gutter="6">
                  <el-col :span="1.5">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <span @click="handleUpdate(scope.row)" :style="{ color: theme, cursor: 'pointer' }"
                        v-hasPermi="['course:knowledge:put']">
                        <svg-icon icon-class="editor" style="font-size: 17px" />
                      </span> </el-tooltip></el-col>
                  <el-col :span="1.5" v-if="scope.$index != List.length - 1">
                    <el-tooltip class="item" effect="dark" content="下移" placement="top">
                      <span @click="downMove(scope.row)" :style="{ color: theme, cursor: 'pointer' }"
                        v-hasPermi="['course:knowledge:put']">
                        <i class="el-icon-sort-down"></i>
                      </span> </el-tooltip></el-col>
                  <el-col :span="1.5" v-if="scope.$index != 0">
                    <el-tooltip class="item" effect="dark" content="上移" placement="top">
                      <span @click="upMove(scope.row)" :style="{ color: theme, cursor: 'pointer' }"
                        v-show="scope.row.sort > 0" v-hasPermi="['course:knowledge:put']">
                        <i class="el-icon-sort-up"></i>
                      </span>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="1.5" v-if="is_superuser">
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <span @click="handleDel(scope.row)" :style="{ color: 'red', cursor: 'pointer' }"
                        v-hasPermi="['course:knowledge:delete']">
                        <svg-icon icon-class="del" style="font-size: 17px" />
                      </span> </el-tooltip></el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>

          <!-- 移动端卡片视图 -->
          <div v-if="isMobile" class="mobile-card-view">
            <!-- 添加骨架屏组件 -->
            <mobile-skeleton v-if="loading" type="card" :count="3" />
            
            <div v-else-if="List.length === 0" class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无数据</p>
            </div>
            
            <el-card v-else v-for="(item, index) in List" :key="index" class="mobile-card" shadow="hover">
              <div slot="header" class="card-header">
                <div class="card-title" :style="{ color: theme }">{{ item.name }}</div>
                <div class="card-actions">
                  <el-tag size="small" type="info">{{ item.category.name }}</el-tag>
                </div>
              </div>
              <div class="card-content">
                <div class="info-list">
                  <div class="info-item">
                    <span class="label">创建时间：</span>
                    <span class="value">{{ item.create_time }}</span>
                  </div>
                  <div class="info-item" v-if="admin">
                    <span class="label">试题数量：</span>
                    <span class="value">{{ item.question }}</span>
                  </div>
                  <div class="info-item" v-if="!showTree">
                    <span class="label">排序：</span>
                    <span class="value">{{ item.sort }}</span>
                  </div>
                </div>
                
                <div class="content-preview">
                  <div class="details-section">
                    <div class="section-title">知识点内容</div>
                    <div class="preview-text" v-html="item.content"></div>
                  </div>
                </div>
                
                <div class="card-actions">
                  <div>
                    <el-button type="text" @click="handleUpdate(item)" :style="{ color: theme }"
                      v-hasPermi="['course:knowledge:put']">
                      <i class="el-icon-edit"></i> 编辑
                    </el-button>
                    <el-button v-if="admin" type="text" @click="handleQuestion(item.id)" :style="{ color: theme }">
                      <i class="el-icon-view"></i> 查看试题
                    </el-button>
                    <el-button v-if="is_superuser" type="text" @click="handleDel(item)" style="color: #F56C6C"
                      v-hasPermi="['course:knowledge:delete']">
                      <i class="el-icon-delete"></i> 删除
                    </el-button>
                  </div>
                  <div class="sort-actions" v-if="List.length > 1">
                    <el-button v-if="index != List.length - 1" type="text" @click="downMove(item)" :style="{ color: theme }"
                      v-hasPermi="['course:knowledge:put']">
                      <i class="el-icon-sort-down"></i> 下移
                    </el-button>
                    <el-button v-if="index != 0" type="text" @click="upMove(item)" :style="{ color: theme }"
                      v-hasPermi="['course:knowledge:put']">
                      <i class="el-icon-sort-up"></i> 上移
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
            
            <!-- 移动端分页 -->
            <div class="mobile-pagination" v-if="total > 0">
              <div class="mobile-pagination-wrapper">
                <!-- 第一行：总数和每页条数 -->
                <div class="pagination-row top-row">
                  <span class="el-pagination__total">共 {{ total }} 条</span>
                  <el-select 
                    v-model="queryParams.page_size" 
                    size="mini" 
                    class="el-pagination__sizes"
                    @change="handleSizeChange">
                    <el-option
                      v-for="item in [10, 20, 30, 50]"
                      :key="item"
                      :label="`${item}条/页`"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
                
                <!-- 第二行：页码导航 -->
                <div class="pagination-row bottom-row">
                  <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-size="queryParams.page_size"
                    layout="prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>

          <!-- 桌面端分页 -->
          <pagination v-show="total > 0 && !isMobile" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size"
            @pagination="getList" />
        </div>
      </el-col>
    </el-row>
    
    <!-- 移动端分类选择弹窗 -->
    <el-dialog title="选择课程分类" :visible.sync="showCategorySelector" class="mobile-category-dialog" v-if="isMobile">
      <CourseTree :title="title" @search="handleMobileTreeSelect" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCategorySelector = false">取 消</el-button>
        <el-button type="primary" @click="confirmCategorySelection" :style="{ backgroundColor: theme, borderColor: theme }">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import {
  categoryTree,
  categoryDetail,
  listKnowledge,
  delKnowledge,
  updateKnowledge,
} from "@/api/vadmin/course/course";
import CourseTree from "@/components/CourseTree";
// 引入骨架屏组件
import MobileSkeleton from "@/components/MobileSkeleton";

export default {
  name: "Knowledge",
  components: {
    CourseTree,
    MobileSkeleton
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      title: "课程分类",
      total: 0,
      courseId: "",
      showTree: true,
      knowledgeOptions: [],
      queryParams: {
        category: "",
        page: 1,
        page_size: 10,
        content_wd: "",
        name_wd: "",
      },
      List: [],
      // 显示搜索条件
      showSearch: true,
      courseOptions: [],
      course_value: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // editor: true,
      screenWidth: document.body.clientWidth,
      showCategorySelector: false,
      expandedCards: [],
      selectedCategory: null,
    };
  },
  computed: {
    ...mapState(["settings",'admin','is_superuser']),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
    admin(){
      return this.$store.state.user.admin;
    },
    is_superuser(){
      return this.$store.state.user.is_superuser;
    },
    isMobile() {
      return this.screenWidth < 768;
    }
  },

  watch: {
    screenWidth(val) {
      this.screenWidth = val;
    }
  },
  created() {
    if (this.$route.params.queryParams) {
      this.queryParams = this.$route.params.queryParams
      this.getList();
    } else {
      if (this.$route.query.knowledge) {
        this.queryParams.name_wd = this.$route.query.knowledge;
        this.getList();
      } else {
        this.getList();
      }
    }
    this.getKnowledge();
    this.getTreeselect();
    
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = document.body.clientWidth;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listKnowledge(this.queryParams).then((response) => {
        if (response && response.results) {
          this.List = response.results;
          // 按照 sort 字段对列表进行排序
          if (this.List && this.List.length > 0) {
            this.List.sort((a, b) => {
              return a.sort - b.sort;
            });
          }
          this.total = response.count || 0;
        } else {
          this.List = [];
          this.total = 0;
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取知识点列表失败:", error);
        this.List = [];
        this.total = 0;
        this.loading = false;
      });
    },
    /** 查询试题 */
    handleQuestion(id) {
      let { href } = this.$router.resolve({
        path: "/question/question",
        query: { knowledge: id },
      });
      window.open(href, "_blank");
    },

    /** 查询列表 */
    getList1(data) {
      // console.log(2222, data);
      this.queryParams.category = "";

      if (data !== "") {
        this.queryParams.category = data.id;
        this.getList();
        this.getKnowledge();
        // }
      } else {
        this.getList();
        this.getKnowledge();
      }
    },
    handleAdd() {
      this.$router.push({ name: "Newknowledge", parmas: { type: 2 } });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.name_wd = "";
      this.queryParams.content_wd = "";
      this.resetForm("queryForm");
      // this.$refs['queryForm'].resetFields();
      this.handleQuery();
    },
    /*修改 */
    handleUpdate(row) {
      // console.log("查询参数", this.queryParams)
      this.$router.push({
        name: "Newknowledge",
        params: { id: row.id, type: 2, queryParams: this.queryParams },
      });
    },
    /*删除 */
    handleDel(row) {
      const CourseIds = row.id;
      this.$confirm(
        '是否确认删除"' +
        row.name +
        '"的数据项？确认删除后，关联试题将会一并删除',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delKnowledge(CourseIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // outEditor() {
    //   this.editor = !this.editor;
    //   this.getTreeselect();
    // },
    /** 表格排序 */
    changeSort(a, b) {
      if (a.sort > b.sort) {
        return -1;
      }
    },
    getKnowledge() {
      this.knowledgeOptions = [];
      listKnowledge({
        page_size: 10000000,
        page: 1,
        category: this.queryParams.category,
      }).then((response) => {
        if (response && response.results) {
          this.knowledgeOptions = response.results;
        } else {
          this.knowledgeOptions = [];
        }
      }).catch(error => {
        console.error("获取知识点选项失败:", error);
        this.knowledgeOptions = [];
      });
    },
    /** 查询下拉树结构 */
    getTreeselect() {
      categoryTree().then((response) => {
        if (response) {
          this.courseOptions = response;
        } else {
          this.courseOptions = [];
        }
      }).catch(error => {
        console.error("获取分类树失败:", error);
        this.courseOptions = [];
      });
    },
    getTreeDetail(id) {
      categoryDetail(id).then((res) => {
        if (res) {
          this.courseOptions = res;
        } else {
          this.courseOptions = [];
        }
      }).catch(error => {
        console.error("获取分类详情失败:", error);
        this.courseOptions = [];
      });
    },

    // 新增树结构节点
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },

    downMove(row) {
      row.sort++;

      delete row.category;
      updateKnowledge(row).then((res) => {
        this.getList();
      });
    },
    upMove(row) {
      row.sort--;
      delete row.category;
      updateKnowledge(row).then((res) => {
        this.getList();
      });
    },
    expandCard(index) {
      this.expandedCards[index] = !this.expandedCards[index];
    },
    handleMobileTreeSelect(data) {
      if (data && data.id) {
        this.queryParams.category = data.id;
      } else {
        this.queryParams.category = "";
      }
      this.getList();
      this.getKnowledge();
    },
    confirmCategorySelection() {
      this.showCategorySelector = false;
      this.getList();
      this.getKnowledge();
    },
    handleSizeChange(size) {
      this.queryParams.page_size = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
}

.down-tree {
  display: block;
  width: 240px;
  overflow-x: scroll;
}

/* // 禁止旋转 */
/deep/ .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}

/* //有子节点 且未展开 */
/deep/ .el-tree .el-icon-caret-right:before {
  /* //这里是你需要修改的图标路径 */
  background: url("../../../../assets/images/shouqi.svg") no-repeat 0 0 !important;
  content: "";
  display: block;
  width: 16px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}

/* // 无子节点 */
/deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: url("../../../../assets/images/zhankai.svg") no-repeat 0 0 !important;
  content: "";
  display: block;
  width: 16px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}

/* //有子节点 且已展开 */
/deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../../../assets/images/zhankai.svg") no-repeat 0 0 !important;
  content: "";
  display: block;
  width: 16px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}

.mobile-search {
  margin-bottom: 15px;
}

.mobile-form {
  .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;

    .el-form-item__label {
      display: block;
      text-align: left;
      padding: 0 0 5px;
    }

    .el-select, .el-input {
      width: 100%;
    }
  }
}

.mobile-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.mobile-table {
  font-size: 12px;

  /deep/ .el-table__header-wrapper,
  /deep/ .el-table__body-wrapper {
    font-size: 12px;
  }

  /deep/ .cell {
    padding: 5px 8px;
  }
}

.mobile-actions {
  display: flex;
  justify-content: space-around;
}

.mobile-card-view {
  margin-top: 15px;
  
  .empty-data {
    text-align: center;
    padding: 40px 0;
    color: #909399;
    
    i {
      font-size: 40px;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 14px;
    }
  }
  
  .mobile-card {
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.99);
    }
    
    /deep/ .el-card__header {
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.3;
        flex: 1;
      }
      
      .card-actions {
        display: flex;
        align-items: center;
      }
    }
    
    .card-content {
      padding: 10px 0;
      
      .info-list {
        margin: 10px 0;
        
        .info-item {
          margin: 8px 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          
          .label {
            color: #606266;
            margin-right: 5px;
            font-size: 14px;
            min-width: 80px;
          }
          
          .value {
            color: #333;
            font-size: 14px;
          }
        }
      }
      
      .content-preview {
        margin-top: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 10px 15px;
        
        .details-section {
          .section-title {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 15px;
            color: #303133;
          }
          
          .preview-text {
            margin-top: 5px;
            font-size: 14px;
            overflow: visible;
            word-break: break-word;
            
            /deep/ img {
              max-width: 100%;
              height: auto;
            }
            
            /deep/ table {
              width: 100%;
              max-width: 100%;
              overflow-x: auto;
              display: block;
              border-collapse: collapse;
              margin: 10px 0;
              
              th, td {
                border: 1px solid #e0e0e0;
                padding: 8px;
                min-width: 60px;
              }
              
              th {
                background-color: #f5f7fa;
              }
            }
            
            /deep/ p {
              margin: 8px 0;
              line-height: 1.5;
            }
            
            /deep/ ul, /deep/ ol {
              padding-left: 20px;
              margin: 8px 0;
            }
            
            /deep/ pre {
              background-color: #f0f0f0;
              padding: 10px;
              border-radius: 4px;
              overflow-x: auto;
              font-family: monospace;
              margin: 10px 0;
            }
          }
        }
      }
      
      .card-actions {
        margin-top: 15px;
        border-top: 1px dashed #ebeef5;
        padding-top: 15px;
        display: flex;
        flex-direction: column;
        
        > div {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-bottom: 10px;
          padding-left: 10px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .el-button {
            margin: 5px;
            margin-left: 0;
            margin-right: 10px;
          }
        }
        
        .el-button {
          font-size: 13px;
          
          i {
            margin-right: 3px;
          }
        }
        
        .sort-actions {
          margin-top: 5px;
          padding-top: 5px;
          border-top: 1px dotted #ebeef5;
        }
      }
    }
  }
}

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  
  .page-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .mobile-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f5f7fa;
    border-radius: 8px;
    font-size: 14px;
    color: #606266;
    margin-top: 5px;
  }
}

.mobile-category-dialog {
  width: 90% !important;
  margin: 0 auto !important;
  border-radius: 12px;
  overflow: hidden;
  
  /deep/ .el-dialog__header {
    padding: 15px;
    background-color: #f5f7fa;
    text-align: center;
    font-weight: bold;
  }
  
  /deep/ .el-dialog__body {
    padding: 15px;
    max-height: 60vh;
    overflow-y: auto;
  }
}

.mobile-layout {
  .el-row {
    margin-bottom: 0;
  }
}

/* 移动端分页样式 */
.mobile-pagination {
  margin: 20px 0 30px;
  
  .mobile-pagination-wrapper {
    width: 100%;
    border-radius: 4px;
    background-color: #f8f9fa;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    
    .pagination-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.top-row {
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 8px;
        justify-content: space-around;
      }
      
      &.bottom-row {
        padding-top: 5px;
      }
      
      .el-pagination__total {
        margin: 5px 5px 5px 0;
        font-size: 13px;
        color: #606266;
        font-weight: normal;
        white-space: nowrap;
      }
      
      .el-pagination__sizes {
        width: auto;
        margin: 5px 0;
        
        /deep/ .el-input__inner {
          height: 28px;
          line-height: 28px;
          font-size: 13px;
          border-radius: 4px;
        }
        
        /deep/ .el-input__suffix {
          right: 5px;
        }
        
        /deep/ .el-select-dropdown__item {
          padding: 0 15px;
          height: 34px;
          line-height: 34px;
          font-size: 13px;
        }
      }
      
      /deep/ .el-pagination {
        padding: 0;
        white-space: normal;
        background: transparent;
        text-align: center;
        width: 100%;
        
        &.is-background {
          .btn-next,
          .btn-prev,
          .el-pager li {
            margin: 3px;
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            font-weight: normal;
            background-color: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
          }
          
          .el-pager li:not(.disabled).active {
            background-color: var(--theme);
            color: #fff;
            border-color: var(--theme);
          }
        }
        
        .el-pagination__jump {
          margin: 5px 0 5px 10px;
          font-size: 13px;
          color: #606266;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          white-space: nowrap;
          
          /deep/ .el-input {
            width: 45px;
            margin: 0 3px;
            
            .el-input__inner {
              height: 28px;
              line-height: 28px;
              padding: 0 3px;
              text-align: center;
              font-size: 13px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}

/* 超小屏幕特殊处理 */
@media screen and (max-width: 360px) {
  .mobile-pagination {
    .mobile-pagination-wrapper {
      padding: 8px 5px;
      
      .pagination-row {
        &.top-row {
          flex-direction: column;
          align-items: center;
          
          .el-pagination__total {
            margin-bottom: 8px;
          }
        }
        
        /deep/ .el-pagination {
          .el-pager {
            li {
              min-width: 26px;
              height: 26px;
              line-height: 26px;
              margin: 2px;
              font-size: 12px;
            }
          }
          
          button,
          .btn-prev,
          .btn-next {
            width: 26px;
            height: 26px;
          }
        }
      }
    }
  }
}
</style>
